<template>
	<div class="sku-dialog">
    <van-popup class="sku-pop" :lock-scroll="lockScroll" v-model="overlayVisible" @close="skuPopClose" position="bottom">
    <!--ZhouQG 周期购的样式-->
      <div
        v-show="showSkuDetail"
        :class="dialogType"
        class="sku-wrapper">
        <div class="sku-wrapper-app">
          <!--头部商品信息-->
          <div class="sku-wrapper-app-head">
            <div class="left-wrap">
              <div class="img">
                <img :src="goodsImg" alt="" @click="imgPreview(goodsImg)">
              </div>
            </div>
            <div class="right-wrap" v-if="!htmlData.wild_fire_education">

              <!--弹层的价格 &#45;&#45; 不同的模式不同-->
              <!-- v-if="dialogType == 'default'" -->
              <div class="right-wrap-item price">
                <!-- 内购商品 -->
                <span class="sku-price neigou-sku-price" v-if="htmlData.ng_activity==1">
                  <span v-html="scaleGoodsPriceFn(htmlData.item_ng_price)"></span>
                </span>
                <span class="sku-price" v-else-if="skuObj.price">
                  <span v-html="scaleGoodsPriceFn(skuObj.price)"></span>
                </span>
                <!--默认的价格-->
                <span v-else>
                  <span
                    v-if="htmlData.range_price && htmlData.range_price.start && htmlData.range_price.start!=htmlData.range_price.end && htmlData.is_miao!=1 && htmlData.is_bargin!=1 && htmlData.item_detail.is_repurchase!=1" class="sku-price">
                    <span v-if="htmlData.range_price.end!=0">
                      <span v-html="scaleGoodsPriceFn(zqgPrice || htmlData.range_price.start)"></span><span v-if="htmlData.range_price.end > 0">-<span v-html="scaleGoodsPriceFn(htmlData.range_price.end)"></span></span>
                    </span>
                    <span v-else>
                      <span v-html="scaleGoodsPriceFn(htmlData.range_price.start)"></span>
                    </span>
                  </span>
                  <span v-else-if="htmlData.item_detail" class="sku-price">
                    <!-- 订货商阶梯价格展示 -->
                    <span v-if="htmlData.activity == 6 && htmlData.is_item_detail_style == '0' && !gift  && detailAll && detailAll.ladder_price && detailAll.ladder_price.length>0 && activityType != 'collocate' && activityType != 'addSolitaireCar'" v-html="scaleGoodsPriceFn(noSkuDhsPrice)"></span>
                    <span v-else v-html="scaleGoodsPriceFn(htmlData.item_detail.price)"></span>
                  </span>
                  <!-- 显示零售价规则：购物模式有零售价 或者 订货模式有零售价并且没有sku -->
                  <div class="retail_price" v-if="(htmlData.is_item_detail_style == '1' && htmlData.item_detail.retail_price) || (htmlData.is_item_detail_style == '0' && htmlData.item_detail.retail_price && dhSkuList.length == 0)">{{htmlData.present_price_name}}：{{is_crossBorderDz? mSymbol.name:'¥'}}{{htmlData.item_detail.retail_price}}</div>
                  <div class="retail_price" v-if="htmlData.is_item_detail_style == '0' && htmlData.restricted_purchase && dhSkuList.length > 0">{{htmlData.restricted_purchase}}</div>
                </span>

                <!-- 券后价 -->
                <span class="coupon-price" v-if="htmlData.is_coupon_detail_show == 1 && (htmlData.coupon_listscount && htmlData.coupon_listscount.length>0)">
                  <span>券后</span>
                  <span class="coupon-sku-price" v-if="skuObj.coupon_price" v-html="scaleGoodsPriceFn(skuObj.coupon_price)"></span>
                  <span v-else v-html="scaleGoodsPriceFn(htmlData.item_coupon_value)"></span>
                  <span>起</span>
                </span>

                <!--原价-->
                <span class="o-price" v-if="skuObj.o_price && skuObj.o_price != skuObj.price">&yen;{{ skuObj.o_price }}</span>
                <div class="retail_price" v-if="skuObj.retail_price && htmlData.is_item_detail_style == '1'">{{htmlData.present_price_name}}：{{is_crossBorderDz? mSymbol.name:'¥'}}{{skuObj.retail_price}}</div>
                <div class="retail_price" v-if="skuObj.sku_id && htmlData.is_item_detail_style == '0' && !gift && htmlData.activity == 6 && htmlData.restricted_purchase">{{htmlData.restricted_purchase}}</div>
                <span v-if="htmlData.item_detail && htmlData.item_detail.dollar_price && htmlData.is_paypal==1" class="sku-dollar">
                  &dollar;
                  <span v-if="htmlData.range_price && htmlData.range_price.dol_start &&  htmlData.range_price.dol_end && htmlData.range_price.dol_start!=htmlData.range_price.dol_end && htmlData.is_miao!=1 && htmlData.is_bargin!=1">{{htmlData.range_price.dol_start}}-{{htmlData.range_price.dol_end}}</span>
                  <span v-else>{{htmlData.item_detail.dollar_price}}</span>
                </span>
                <div class="item-tips fontZhouQG" v-if="htmlData.activity==7">周期购</div>
              </div>
              <div class="right-wrap-item stock" style="color: #F30C23;" v-if="htmlData.item_detail && htmlData.item_detail.total_tax_fee>0">含税价：{{is_crossBorderDz? mSymbol.name:'¥'}}{{htmlData.item_detail.total_tax_fee}}起</div>
              <!--弹层的价格 &#45;&#45; 不同的模式不同-->
              <div class="right-wrap-item stock" v-if="htmlData.item_detail && htmlData.item_detail.hide_stock==1 && !gift">
                库存：<span class="num">{{skuObj.stock || htmlData.item_detail.num}}</span>
                <span class="init">{{htmlData.item_detail.unit}}</span>
              </div>
              <div class="right-wrap-item choose" v-if="hasSku">{{ skuNameStr }}</div>
            </div>
            <div class="close" @click="handleCloseDialog">
              <!-- TODO svg替换 -->
              <span class="img-close"></span>
            </div>
          </div>

          <div class="sku-wrapper-app-body" v-if="!htmlData.wild_fire_education">
            <!--sku选择部分 订货--> <!--搭配套餐处不显示订货模式的展示-->
            <div
              ref="dhWrapper"
              class="dhWrapper"
              v-if="htmlData.activity == 6 && htmlData.is_item_detail_style == '0' && !gift && dhSkuList.length > 0 && activityType != 'collocate' && activityType != 'addSolitaireCar'">
              <div class="sku-dh">
                <div class="sku-dh-item title">
                  <div class="sku-dh-item-info ">商品规格</div>
                  <div class="sku-dh-item-price ">价格/库存</div>
                  <div class="sku-dh-item-num "></div>
                </div>

                <div
                  v-for="(item, index) in dhSkuList"
                  :key="index"
                  class="sku-dh-item">
                  <div class="sku-dh-item-info" @click="dhsChangeImg(item)">{{ item.sku_name }}</div>
                  <div class="sku-dh-item-price">
                    <div class="price inline-block" v-if="item.new_sku_ladder.length > 0" v-html="scaleGoodsPriceFn(item.jtPrice, 'fontNum')"></div>
                    <div class="price inline-block" v-else v-html="scaleGoodsPriceFn(item.price, 'fontNum')"></div>
                    <del class="origin-price inline-block">&yen;{{ item.o_price }}</del>
                    <div class="stock" v-if="htmlData.item_detail.hide_stock==1">{{ item.num }}{{htmlData.item_detail.unit}}</div>
                    <div class="stock" v-if="htmlData.item_detail.retail_price">{{htmlData.present_price_name}}：{{is_crossBorderDz? mSymbol.name:'¥'}}{{ item.retail_price }}</div>
                  </div>
                  <div class="sku-dh-item-num">
                    <div class="num"><count-plug :plugType="1" :minLimit="0" :maxLimit="item.num" v-model="item.chooseNum" :param="{idx: index, item: item}" @getParam="changeNumDhs"></count-plug></div>
                  </div>
                </div>
              </div>
            </div>

            <!--sku选择部分 普通-->
            <div v-else >
              <!--周期购sku选择部分-->
              <div class="" v-if="htmlData.activity == 7">
                <!--周期购sku-->
                <div class="sku-item" v-if="buySpecList && buySpecList.length > 0">
                  <div class="sku-item-title">周期购规格 <span class="tips">{{ buySpecStr }}</span></div>
                  <div class="sku-item-app">
                    <van-button
                      @click="handleClickBuySpec(item, index)"
                      v-for="(item, index) in buySpecList"
                      :key="index"
                      round hairline class="btn"
                      :class="item.active ? 'active': '' ">{{ item.sku_describe }}</van-button>
                  </div>
                </div>
                <!--周期购sku-->
                <div class="sku-item" v-if="estimeDeliverList && estimeDeliverList.length > 0">
                  <div class="sku-item-title">配送时间 <span class="tips">{{ estimeDeliverStr }}</span></div>
                  <div class="sku-item-app">
                    <van-button
                      @click="handleClickEstimeDeliver(item, index)"
                      v-for="(item, index) in estimeDeliverList"
                      :key="index"
                      round hairline class="btn"
                      :class="item.active ? 'active': '' ">{{ item.cycle_send_time }}</van-button>
                  </div>
                </div>
              </div>

              <div v-if="skuList && skuList.length > 0">
                <!--普通sku-->
                <div class="sku-item" v-for="(item,index) in skuList" :key="index">
                  <div class="sku-item-title">{{ item.property_name }}</div>
                  <div class="sku-item-app">
                    <van-button
                      v-if="child.sku_name"
                      v-for="(child, num) in item.child_names"
                      :key="num"
                      @click="handleClickSku(child, num, index)"
                      round hairline class="btn"
                      :class="[child.active ? 'active': '', child.isShow ? '':'noneActive']">{{ child.sku_name }}</van-button>
                  </div>
                </div>
              </div>

              <!--试用商品不显示数量-->
              <div class="sku-item" v-if="htmlData.activity != 4 && !gift">
                <div class="sku-item-add">
                  <span class="sku-item-add-title" v-if="htmlData.activity == 7">每次配送数量</span>
                  <span class="sku-item-add-title" v-else>购买数量</span>
                  <div class="sku-item-add-con">
                    <count-plug :plugType="1" :minLimit="0" :maxLimit="skuObj.stock" v-if="htmlData.activity == 6 && htmlData.is_item_detail_style == '0' && !gift && detailAll && detailAll.ladder_price && detailAll.ladder_price.length>0 && activityType != 'collocate' && activityType != 'addSolitaireCar'" v-model="formData.addNum" @changeNum="changeNoSkuNum" ></count-plug>
                    <count-plug :plugType="1" :maxLimit="skuObj.stock ? skuObj.stock : htmlData ? htmlData.item_detail.num : 0" v-else v-model="formData.addNum"></count-plug>
                  </div>
                </div>
                <div class="purchase_num" v-if="htmlData.restricted_purchase">{{htmlData.restricted_purchase}}</div>
              </div>



              <!-- 处方药定制字段 -->
              <div v-if="detailAll && detailAll.tszd_info">
                <div class="mdcine_line" v-if="detailAll.tszd_info.batch_number">
                  <span class="t1">生产批号</span>
                  <span class="t2">{{detailAll.tszd_info.batch_number}}</span>
                </div>
                <div class="mdcine_line" v-if="detailAll.tszd_info.expiration_date">
                  <span class="t1">有效期</span>
                  <span class="t2">{{detailAll.tszd_info.expiration_date}}</span>
                </div>
                <div class="mdcine_line" v-if="detailAll.tszd_info.production_license">
                  <span class="t1">生产许可编号</span>
                  <span class="t2">{{detailAll.tszd_info.production_license}}</span>
                </div>
                <div class="mdcine_line" v-if="detailAll.tszd_info.approval_no">
                  <span class="t1">批准文号</span>
                  <span class="t2">{{detailAll.tszd_info.approval_no}}</span>
                </div>
                <div class="mdcine_line" v-if="detailAll.tszd_info.specs">
                  <span class="t1">规格</span>
                  <span class="t2">{{detailAll.tszd_info.specs}}</span>
                </div>
                <div class="mdcine_line" v-if="detailAll.tszd_info.reserve_conditions">
                  <span class="t1">储存条件</span>
                  <span class="t2">{{detailAll.tszd_info.reserve_conditions}}</span>
                </div>
                <div class="mdcine_line" v-if="detailAll.tszd_info.manufacturer">
                  <span class="t1">生产厂家</span>
                  <span class="t2">{{detailAll.tszd_info.manufacturer}}</span>
                </div>
              </div>

              <!-- 是否享受门店服务 -->
              <div v-if="htmlData.isItemStoreServe==1" class="sku-item">
                <span class="sku-item-add-title">是否享受门店服务</span>
                <div class="sku-item-add-con">
                  <van-switch v-model="formData.is_store_serve"
                    class="item-switch"
                    active-color="#EB040B"
                    inactive-color="#F2F2F2"
                    active-value="1"
                    inactive-value="0"
                    size="15px"/>
                </div>
              </div>

            </div>

            <!--时间 备注内容-->
            <div class="need_memo">
              <div class="sku-item" v-if="htmlData.item_config && htmlData.item_config.shopping_need_date == 1">
                <div class="sku-item-date" @click="handleOpenDatePicker">
                  <span class="sku-item-date-title">{{htmlData.item_config.shopping_date_name}}</span>
                  <div class="sku-item-date-con" >
                    <div class="input">
                      <!-- 没有失去焦点，键盘盖住了选择器 -->
                      <input v-model="formData.dateTime" disabled type="text" :placeholder="htmlData.item_config.shopping_date_hint">
                    </div>

                  </div>
                </div>
              </div>

              <div class="sku-item" v-if="htmlData.item_config && htmlData.item_config.shopping_need_memo == 1">
                <div class="sku-item-date">
                  <span class="sku-item-date-title">备注</span>
                  <div class="sku-item-date-con" >
                    <div class="input sku-bz-wd">
                      <input v-model="formData.mark" @blur="blurEvent" type="text" :placeholder="htmlData.item_config.shopping_memo_hint">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!--底部按钮信息-->
          <!-- 野火教育定制 start -->
          <div class="sku-wrapper-app-foot" v-if="htmlData.wild_fire_education && !gift">
            <div class="sku-btn">
              <div
                @click="contactTeacher"
                class="sku-btn-item cart-gra-btn">联系老师</div>
              <div
                @click="JumpName('item-detail',{'detailId': itemId})"
                class="sku-btn-item buy-gra-btn">查看详情</div>
            </div>

          </div>
          <!-- 野火教育定制 end -->
          <div class="sku-wrapper-app-foot" v-else>
            <template v-if="!gift">
            <!-- 搭配套餐 -->
            <div class="sku-btn" v-if="activityType == 'collocate'">
              <div @click="handleClickAssort" class="sku-btn-item buy-gra-btn radiusAll DaPTC">确定</div>
            </div>

            <!-- 详情页加入购物车 -->
            <div class="sku-btn" v-else-if="activityType == 'addCart'">
              <div @click="handleClickAddCar" class="sku-btn-item buy-gra-btn radiusAll AddCart">确定</div>
            </div>

            <!-- 详情页立即购买 -->
            <div class="sku-btn" v-else-if="activityType == 'buyNow'">
              <div @click="handleClickBuyNow" class="sku-btn-item buy-gra-btn radiusAll buyNow">确定</div>
            </div>

            <!-- 我要送礼按钮 -->
            <div class="sku-btn" v-else-if="activityType == 'sendGift'">
              <div @click="handleClickBuyNow" class="sku-btn-item buy-gra-btn radiusAll buyNow">确定</div>
            </div>

            <!-- 群接龙加入购物车 -->
            <div class="sku-btn" v-else-if="activityType == 'addSolitaireCar'">
              <div @click="handleClickAddSolitaire" class="sku-btn-item buy-gra-btn radiusAll buyNow">确认加入</div>
            </div>

            <!--秒杀按钮-->
            <div class="sku-btn" v-else-if="htmlData.activity == 1">
              <div @click="handleClickBuyNow" class="sku-btn-item buy-gra-btn radiusAll MiaoS">确定</div>
            </div>

            <!--打折按钮-->
            <div class="sku-btn" v-else-if="htmlData.activity == 2">
              <div @click="handleClickBuyNow" class="sku-btn-item buy-gra-btn radiusAll DaZ">确定</div>
            </div>

            <!--砍价按钮-->
            <div class="sku-btn" v-else-if="htmlData.activity == 3">
              <div @click="handleClickBuyNow" class="sku-btn-item buy-gra-btn radiusAll KanJ">确定</div>
            </div>

            <!--试用按钮-->
            <div class="sku-btn" v-else-if="htmlData.activity == 4">
              <div @click="handleClickTryItem" class="sku-btn-item try-gra-btn radiusAll ShiY">确定</div>
            </div>

            <!--预售按钮-->
            <div class="sku-btn" v-else-if="htmlData.activity == 5">
              <div @click="handleClickBuyNow" class="sku-btn-item buy-gra-btn radiusAll YuS">确定</div>
            </div>

            <!--周期购按钮-->
            <div class="sku-btn" v-else-if="htmlData.activity == 7">
              <div @click="handleClickBuyNow" class="sku-btn-item zqg-gra-btn radiusAll ZhouQG">{{ htmlData.is_prescription_drug ? '加入需求清单':'立即购买' }}</div>
            </div>

            <!--打包一口价按钮-->
            <div class="sku-btn" v-else-if="htmlData.activity == 8">
              <div
                v-if="!htmlData.is_prescription_drug"
                @click="handleClickAddCar"
                :style="{background:htmlData.shopping_cart_color}"
                class="sku-btn-item buy-gra-btn radiusAll DaBaoYKJ">加入购物车</div>
               <div
                v-else
                @click="handleClickBuyNow"
                class="sku-btn-item buy-gra-btn radiusAll"  :style="{background:htmlData.shopping_buy_color}">{{ htmlData.is_prescription_drug ? '加入需求清单':(htmlData.buy_now_alias?htmlData.buy_now_alias:'立即购买') }}</div>
            </div>
            <!-- 云仓礼包商品不支持加入购物车  is_yuncang_gift 0 非云仓礼包 1 云仓礼包-->
            <div class="sku-btn" :class="htmlData.is_cart_prohibit == 1 ? 'is_cart_prohibit': ''" v-else>
              <!-- 定制 赠品 商品绑定了备注系列 不允许加入购物车 -->
              <div
                v-if="htmlData.is_yuncang_gift == 0 && !htmlData.is_prescription_drug && !htmlData.has_bind_series && !htmlData.is_cart_prohibit"
                @click="handleClickAddCar"
                class="sku-btn-item cart-gra-btn" :style="{background:htmlData.shopping_cart_color}">加入购物车</div>
              <div
                @click="handleClickBuyNow"
                class="sku-btn-item buy-gra-btn" :class="htmlData.is_yuncang_gift == 0 && !htmlData.is_prescription_drug && !htmlData.has_bind_series ? '':'radiusAll'" :style="{background:htmlData.shopping_buy_color}">{{ htmlData.is_prescription_drug ? '加入需求清单':(htmlData.buy_now_alias?htmlData.buy_now_alias:'立即购买') }}</div>
            </div>
            </template>
            <template v-else>
              <div class="sku-btn is_cart_prohibit">
                <div
                  @click="handleClickBuyNowGift"
                  class="sku-btn-item buy-gra-btn radiusAll" :style="{background:htmlData.shopping_buy_color}">立即领取</div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </van-popup>

    <div v-if="htmlData.item_config && htmlData.item_config.shopping_need_date == 1">
      <time-picker :visible.sync="dateTimeVisible" v-model="formData.dateTime" :minDate="minDate" :maxDate="maxDate"></time-picker>
    </div>

    <!-- 野火教育定制 联系老师 start -->
    <van-popup
      v-model="dialogVisible"
      class="code-pop"
    >
    <div class="teacher-code-wrap">
      <div class="teacher-code-wrap-close" v-if="dialogVisible"  @click.stop="dialogVisible = false">
        <img src="https://img.wifenxiao.com/h5-wfx/images/DZ/zhile/close.png" alt="">
      </div>
      <div class="teacher-code-img">
        <img :src="htmlData.wild_fire_contract_tea_pic" :show-menu-by-longpress="true" @load="loadImg" alt="">
      </div>
      <div class="tips">长按识别二维码加老师微信哦~</div>
    </div>
    </van-popup>
    <!-- 野火教育定制 联系老师 end -->
    <get-mobile :bindPhone="is_need_bind_phone" @close="closeMobile"></get-mobile>
  </div>
</template>

<script>
/**
	 * @Author: yqe@360shop.cn
	 * @Date: 2019-11-29 09:38:45
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-09-08 15:54:32
	 */
import Store from '@/utils/store'
import CountPlug from '@/components/CountPlug'
import getMobile from './getMobile'

import timePicker from '../timePicker'
import { getDetailAjax, addCart } from '@/api/item/item'
import { scaleGoodsPrice } from '@/utils/index'
import small from '@/smallapp/small'

import { addSolitaireCart } from '@/api/item/activity'
import Vue from 'vue'
// import { isIOS } from '@/utils/validate'
import { Switch } from 'vant'

Vue.use(Switch)

export default Vue.extend({
  name: 'index',
  components: {
    CountPlug,
    timePicker,
    getMobile
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    itemId: {
      type: [Number, String],
      default: 0
    },
    activity_id: {
      type: [Number, String],
      default: 0
    },
    detailAll: {
      type: Object
    },
    activityType: {
      default: '' // 搭配套餐:collocate 加入购物车：addCart
    },
    gift: {
      type: Boolean,
      default: false
    },
    gift_cards_str: {
      type: String,
      default: ''
    }
  },
  computed: {
  },
  data() {
    return {
      lockScroll: false,
      minLimitNum: undefined,
      selectArr: [], // 存放被选中的值
      shopItemInfo: {}, // 存放要和选中的值进行匹配的数据
      subIndex: [], // 是否选中因为不确定是多规格还是单规格，所以这里定义数组来判断
      showSkuDetail: false,
      dialogType: 'default',
      skuAlias: {}, // sku别名 目前只用于订货商订货模式修改图片预览
      skuImg: {}, // sku图片 目前只用于订货商订货模式修改图片预览
      skuList: [], // 商品SKU列表
      dhSkuList: [], // 订货商SKU列表
      buySpecList: [], // 周期购规格
      buySpecStr: '', // 周期购规格选中后的文字提示
      estimeDeliverList: [], // 配送时间
      estimeDeliverStr: '', // 配送时间格选中后的文字提示
      skuInfo: null,
      skuObj: {}, // 选完SKU后的SKU数据
      hasSku: true, // 该商品是否有sku
      skuNameStr: '', // 已选择的文字显示
      noChooseProp: [], // 未选择的sku
      htmlData: '',
      // skuImgName: '', // 商品有sku图片的sku名称
      arrSkuImg: [], // 商品sku图片
      goodsImg: '',
      goodsPrice: '',
      formData: {
        dateTime: '',
        addNum: 1,
        skuKeyStr: '',
        mark: '',
        item_cycle_sku: '',
        item_cycle_delivery: '',
        is_store_serve: '1'
      },
      zqgPrice: '',
      overlayVisible: false,
      dateTimeVisible: false,
      minDate: '',
      maxDate: '',
      noSkuDhsList: [],
      noSkuDhsPrice: '',
      // 野火教育定制
      dialogVisible: false,
      imgLoaded: false,
      is_need_bind_phone: false
    }
  },
  watch: {
    gift(val) {
      if (val) {
        this.htmlData.is_item_detail_style = 1
      }
    },
    itemId(val) {
      // 改变商品时先清空数据
      this.clearData()
      // this.getDetailAjaxFn(val)
      // 拼团商品详情页skuDialog和skuDialogGroup影响了，先特殊处理下
      if (this.detailAll && this.$route.name != 'item-group') {
        this.getDetailData(this.detailAll)
      } else {
        this.getDetailAjaxFn(val)
      }
    },
    visible(val) {
      this.overlayVisible = val
    },
    overlayVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    closeMobile() {
      this.is_need_bind_phone = false
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
    initSku() {
      const self = this
      for (const i in self.dhSkuList) {
        self.shopItemInfo[self.dhSkuList[i].sku_name] = self.dhSkuList[i] // 修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
      }
      self.checkItem(1) // 初始化传1
    },
    specificationBtn(item, n, index) {
      const self = this
      if (self.selectArr[n] != item) {
        self.selectArr[n] = item
        self.subIndex[n] = index
      } else {
        self.selectArr[n] = ''
        self.subIndex[n] = -1 // 去掉选中的颜色
      }
      self.checkItem()
    },
    checkItem(init) {
      // init 是否初始化时
      const self = this
      const option = self.skuList
      const result = [] // 定义数组储存被选中的值
      for (const i in option) {
        if (typeof self.selectArr[i] !== 'function') {
          result[i] = self.selectArr[i] ? self.selectArr[i] : ''
        }
      }
      for (const i in option) {
        const last = result[i] // 把选中的值存放到字符串last去
        for (const k in option[i].child_names) {
          if (typeof option[i].child_names[k].sku_name === 'string') {
            result[i] = option[i].child_names[k].sku_name // 赋值，存在直接覆盖，不存在往里面添加name值
            option[i].child_names[k].isShow = self.isMay(result) // 在数据里面添加字段isShow来判断是否可以选择
            if (option[i].child_names[k].sku_img && (init == 1)) {
              this.arrSkuImg.push(option[i].child_names[k].sku_img)
            }
          }
        }
        result[i] = last // 还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
      }
      self.$forceUpdate() // 重绘
    },
    isMay(result) {
      for (const i in result) {
        // TODO kbone小程序中遍历数组可能会多出一个array数组对象 需要多加一层判断！！！
        if (result[i] == '' && typeof result[i] !== 'object') {
          return true // 如果数组里有为空的值，那直接返回true
        }
      }
      const newKey = result.join(' ')
      // // console.log(this.shopItemInfo, 'ssaasdasd', newKey)
      if (this.shopItemInfo[newKey]) {
        /* eslint-disable */
          return this.shopItemInfo[newKey].num == 0 ? false : true // 匹配选中的数据的库存，若不为空返回true反之返回false
        }
      },
      /**
       * 点击周期购规格
       */
      handleClickBuySpec(item, index) {
        const buySpecList = this.buySpecList
        buySpecList.forEach((times, num) => {
          if (num == index) {
            if (!times.active) {
              this.$set(this.buySpecList[num], 'active', true)
            } else {
              this.$set(this.buySpecList[num], 'active', false)
            }
          } else {
            this.$set(this.buySpecList[num], 'active', false)
          }
        })
        this.zqgPrice = item.sku_price
        // 检索选择的规格
        this.validateSpecAll()
      },
      /**
       * 点击配送时间SKU
       */
      handleClickEstimeDeliver(item, index) {
        const estimeDeliverList = this.estimeDeliverList
        estimeDeliverList.forEach((times, num) => {
          if (num == index) {
            if (!times.active) {
              this.$set(this.estimeDeliverList[num], 'active', true)
            } else {
              this.$set(this.estimeDeliverList[num], 'active', false)
            }
          } else {
            this.$set(this.estimeDeliverList[num], 'active', false)
          }
        })
        // 检索选择的规格
        this.validateSpecAll()
      },
      /**
       * 点击SKU
       */
      handleClickSku(item, num, index) {
        const skuList = this.skuList
        const child_names = skuList[index].child_names
        child_names.forEach((sku, number) => {
          if (num == number) {
            if (!sku.active) {
              this.$set(this.skuList[index].child_names[num], 'active', true)
            } else {
              this.$set(this.skuList[index].child_names[num], 'active', false)
            }
          } else {
            this.$set(this.skuList[index].child_names[number], 'active', false)
          }
        })
        if (item.sku_img){
          this.goodsImg = item.sku_img
        }
        this.dealFindSkuInfo()
        this.specificationBtn(item.sku_name, index, num)
      },
      // 点击订货商模式的商品标题和+号 修改goodsImg
      dhsChangeImg(item) {
        const skuNameArr = item.sku_name.split(" ")
        let skuID = []
        for (var i in this.skuAlias) {
          skuNameArr.forEach((item) => {
            if (this.skuAlias[i] == item){
              skuID.push(i)
              for(var j in this.skuImg) {
                if(j == i){
                  this.goodsImg = this.skuImg[j]
                }
              }
            }
          })
          // if (this.skuAlias[i] == item.sku_name) {
          //   this.skuImg[i] ? this.goodsImg = this.skuImg[i] : ''
          // }
        }
      },
      //图片放大
      imgPreview(img){
        // TODO 小程序图片预览
        wx.previewImage({
          current: img, //当前图片地址
          urls: this.arrSkuImg,  //所有要预览的图片的地址集合数组形式
        })
      },
      /**
       * 找出SKU信息
       */
      dealFindSkuInfo() {
        const skuList = this.skuList
        const arrSku = [] // 存储sku的key
        const arrSkuName = [] // 存储sku的文字信息
        if(skuList.length > 0) {
          skuList.forEach(item => {
            if (Array.isArray(item.child_names)) {
              item.child_names.forEach(sku => {
                if (sku.active) {
                  arrSku.push(sku.prop_id)
                  arrSkuName.push(sku.sku_name)
                }
              })
            }
          })
          const skuKeyStr = arrSku.join(';')
          const skuInfo = this.skuInfo
          const objKeys = Object.keys(skuInfo)
          if (objKeys.indexOf(skuKeyStr) != -1) {
            this.skuObj = Object.assign(this.skuObj, skuInfo[skuKeyStr], true)
            // console.log('匹配到了', objKeys.indexOf(skuKeyStr), skuInfo[skuKeyStr], skuKeyStr)
            this.formData.skuKeyStr = skuKeyStr
            this.formData.addNum = 1
          } else {
            this.skuObj = {}
            this.formData.addNum = 1
          }
        }
        // 检索选择的规格
        this.validateSpecAll()
      },
      /**
       * 验证是否选中
       */
      validateSpecAll() {
        const buySpecList = this.buySpecList
        const estimeDeliverList = this.estimeDeliverList
        const buySpecArr = [] // 存储选中的周期购规格
        const estimeDeliverArr = [] // 存储选中的配送时间
        const skuList = this.skuList
        const arrSku = [] // 存储sku的key
        const arrSkuName = [] // 存储sku的文字信息
        const propName = []
        const noChooseProp = []
        skuList.forEach(item => {
          noChooseProp.push(item.property_name)
          if (Array.isArray(item.child_names)) {
            item.child_names.forEach(sku => {
              if (sku.active) {
                arrSku.push(sku.prop_id)
                arrSkuName.push(sku.sku_name)
                propName.push(item.property_name)
              }
            })
          }
        })
        // 周期购有单独的规格
        if (this.htmlData.activity == 7) {
          if (Array.isArray(buySpecList)) {
            this.buySpecStr = ''
            this.formData.item_cycle_sku = ''
            buySpecList.forEach(item => {
              if (item.active) {
                this.buySpecStr = `(${this.htmlData.item_cycle.item_cycle_type},共${item.cycle_key}次)`
                this.formData.item_cycle_sku = item.cycle_key // 周期购规格要提交的数据
                buySpecArr.push(item.sku_describe)
                propName.push('周期购规格')
              }
            })
          }
          if (Array.isArray(estimeDeliverList)) {
            this.estimeDeliverStr = ''
            // this.formData.item_cycle_delivery
            estimeDeliverList.forEach(item => {
              if (item.active) {
                this.formData.item_cycle_delivery = item.estime_key // 配送时间要提交的数据
                this.estimeDeliverStr = `(首次送达预计于 ${item.estime_deliver})`
                estimeDeliverArr.push(item.cycle_send_time)
                propName.push('配送时间')
              }
            })
            if (estimeDeliverList.length > 0) noChooseProp.push('配送时间')
          }
        }
        /*eslint no-extend-native: ["error", { "exceptions": ["Array"] }]*/
        Array.prototype.remove = function(val) {
          var index = this.indexOf(val)
          if (index > -1) {
            this.splice(index, 1)
          }
        }
        propName.forEach(item => {
          noChooseProp.remove(item)
        })
        // 赋值筛选未选择的部分
        this.noChooseProp = noChooseProp
        if (noChooseProp.length > 0) {
          const skuNameTemp=noChooseProp.join(' ') || '商品规格'
          this.skuNameStr = `选择：${skuNameTemp} `
        } else {
          this.skuNameStr = `已选：${arrSkuName.join(' ')} ${buySpecArr.join(' ')} ${estimeDeliverArr.join(' ')}`
        }
      },
       // 礼品卡购买
      handleClickBuyNowGift() {
        const formData = this.formData
        const orderBuy = {}
        const obj = {}
        obj.item_id = this.itemId
        obj.sku = formData.skuKeyStr
        obj.num = formData.addNum
        orderBuy.sku = obj.sku
        // return false
        if (this.skuList.length > 0) { // sku未选择则提示
          if (this.noChooseProp.length > 0) {
            this.$Error(`${this.skuNameStr}`)
            return false
          }
        }
        // 关闭弹窗
        this.handleCloseDialog()
        // this.overlayVisible = false

        // 跳转到结算
        orderBuy.order_extry = {}
        orderBuy.order_extry.item_date = formData.dateTime
        orderBuy.order_extry.item_memo = formData.mark
        orderBuy.is_store_serve = formData.is_store_serve
        orderBuy.scanCode = ''
        orderBuy.addressId = ''
        orderBuy.order_source = ''
        orderBuy.live_id = ''
        orderBuy.item_id = obj.item_id
        orderBuy.checkbox = ''
        orderBuy.num = obj.num
        orderBuy.assort_id = ''
        orderBuy.total_num = ''
        orderBuy.supplier_id=this.htmlData.supplier_id
        orderBuy.supplier = this.$route.query.supplier
        orderBuy.type = 'onbuy'        
        // return false
        Store.save('orderBuy', orderBuy)
        
        setTimeout(()=>{
        //   if (isIOS() || isAnFenBao()) {
        //     if (this.gift && this.gift_cards_str) {
        //       this.$JumpHref(this, '/mb/user/giftCardBuy', {'gift_cards_str': this.gift_cards_str})
        //       return
        //     }
        //   } else {
          this.$JumpName(this, 'giftCardBuy', {'gift_cards_str': this.gift_cards_str})
        //   }
        },200)
      },
      /**
       * 立即购买
       */
      handleClickBuyNow() {
        const formData = this.formData
        const orderBuy = {}
        const obj = {}
        obj.item_id = this.itemId
        let tempNum = 0; // 商品总数量
        if (this.htmlData.activity == 6 && this.htmlData.is_item_detail_style == '0' && this.dhSkuList.length > 0) { // 订货模式
          const arrId = []
          const arrNum = []
          const dhSkuList = this.dhSkuList
          dhSkuList.forEach(item => {
            if (item.chooseNum > 0) {
              arrId.push(item.sku_id)
              arrNum.push(item.chooseNum)
              tempNum += item.chooseNum*1
            }
          })
          obj.value = arrId.join(',')
          obj.num = arrNum.join(',')
          orderBuy.sku = obj.value
          orderBuy.is_dhs_order = 'dhs_order'
          if (tempNum<1) {
            if (this.gift) {
              tempNum = 1
              return
            }
            this.$Error('购买的商品数量不能小于1')
            return false
          }
        } else if (this.htmlData.activity == 7) { // 周期购
          obj.num = formData.addNum
          tempNum = formData.addNum
          orderBuy.sku = formData.skuKeyStr
          orderBuy.item_cycle_sku = formData.item_cycle_sku
          orderBuy.item_cycle_delivery = formData.item_cycle_delivery
          if (this.skuList.length > 0) { // sku未选择则提示
            if (this.noChooseProp.length > 0) {
              this.$Error(`${this.skuNameStr}`)
              return false
            }
          }
        } else { // 普通购物模式
          obj.sku = formData.skuKeyStr
          obj.num = formData.addNum
          tempNum = formData.addNum
          orderBuy.sku = obj.sku
          if(obj.num>this.htmlData.max_buy_ng_item_num){
            this.$Error('内购券数量不足,最多只能购买'+this.htmlData.max_buy_ng_item_num+'件该商品')
            return false
          }
          // // console.log(obj, '普通模式')
          if (this.skuList.length > 0) { // sku未选择则提示
            if (this.noChooseProp.length > 0) {
              this.$Error(`${this.skuNameStr}`)
              return false
            }
          }
        }
        if (this.minLimitNum > parseInt(tempNum)) {
          this.$Error(`该商品${this.minLimitNum}件起购`)
          return false
        }
        // 时间验证
        if (this.htmlData.item_config && this.htmlData.item_config.shopping_need_date == 1) {
          if (!formData.dateTime) {
            this.$Error(`请选择${this.htmlData.item_config.shopping_date_name}`)
            return false
          }
        }
        // 备注验证
        if (this.htmlData.item_config && this.htmlData.item_config.shopping_need_memo == 1) {
          if (!formData.mark) {
            this.$Error(`请填写备注`)
            return false
          }
        }
        // 关闭弹窗
        this.handleCloseDialog()
        // 跳转到结算
        orderBuy.order_extry = {}
        orderBuy.order_extry.item_date = formData.dateTime
        orderBuy.order_extry.item_memo = formData.mark
        orderBuy.is_store_serve = formData.is_store_serve
        orderBuy.scanCode = ''
        orderBuy.addressId = ''
        orderBuy.order_source = ''
        orderBuy.live_id = ''
        orderBuy.item_id = obj.item_id
        orderBuy.checkbox = ''
        orderBuy.num = obj.num
        orderBuy.assort_id = ''
        orderBuy.total_num = ''
        orderBuy.supplier_id=this.htmlData.supplier_id
        orderBuy.supplier = this.$route.query.supplier
        orderBuy.ng_store_id = this.$route.query.storeId  //内购门店id
        if(this.htmlData.bmd_info && this.htmlData.bmd_info.bmd_id > 0){
          orderBuy.bmd_id = this.htmlData.bmd_info.bmd_id  //多买优惠活动id
        }
        // 直播来源
        if(this.$route.query.source){
          orderBuy.order_source=this.$route.query.source
        }
        if(this.$route.query.live_id){
          orderBuy.live_id=this.$route.query.live_id
        }
        //营销活动未开始原价购买
        if(this.$route.query.bid!=1){
          orderBuy.item_miao_id = this.htmlData.miao ? this.htmlData.miao.item_miao_id : ''
          orderBuy.item_limit_discount_id = this.htmlData.item_discount ? this.htmlData.item_discount.item_limit_discount_id : ''
          orderBuy.item_bargin_id = this.htmlData.item_bargin ? this.htmlData.item_bargin.item_bargin_id : ''
        }
        orderBuy.item_cycle_buy_id = this.htmlData.item_cycle ? this.htmlData.item_cycle.item_cycle_buy_id : ''
        orderBuy.active = ''
        orderBuy.type = 'onbuy'
        if (this.activityType == 'sendGift') { // 我要送礼的参数
          orderBuy.is_send_gift = 1
          orderBuy.type = 'sendGift'
        }
        Store.save('orderBuy', orderBuy)
        // if (this.gift && this.gift_cards_str) {
        //   this.$JumpName(this, 'giftCardBuy', {'gift_cards_str': this.gift_cards_str})
        //   return
        // }
        if (this.htmlData.is_need_bind_phone) {
          this.is_need_bind_phone = true
          return false
        }
        setTimeout(()=>{
          this.$JumpName(this, 'buy')
        },200)
      },
      /**
       * 加入购物车
       */
      handleClickAddCar() {
        const formData = this.formData
        const obj = {}
        if (this.htmlData.activity == 6 && this.htmlData.is_item_detail_style == '0' && this.dhSkuList.length > 0) { // 订货模式
          const dhSkuList = this.dhSkuList
          const data = []
          dhSkuList.forEach(item => {
            if (item.chooseNum > 0) {
              const temp = {
                id: this.itemId,
                value: item.sku_id,
                num: item.chooseNum,
                supplier_id: this.htmlData.supplier_id
              }
              data.push(temp)
            }
          })
          obj.data = data
          if (data.length < 1) {
            this.$Error('购买的商品数量不能小于1')
            return false
          }
        } else { // 普通购物模式
          obj.id = this.itemId
          obj.dhs_send = 0
          obj.value = formData.skuKeyStr
          obj.num = formData.addNum
          if (this.skuList.length > 0) { // sku未选择则提示
            if (this.noChooseProp.length > 0) {
              this.$Error(`${this.skuNameStr}`)
              return false
            }
          }
        }
        // 时间验证
        if (this.htmlData.item_config && this.htmlData.item_config.shopping_need_date == 1) {
          if (!formData.dateTime) {
            this.$Error(`请选择${this.htmlData.item_config.shopping_date_name}`)
            return false
          }
        }
        // 备注验证
        if (this.htmlData.item_config && this.htmlData.item_config.shopping_need_memo == 1) {
          if (!formData.mark) {
            this.$Error(`请填写备注`)
            return false
          }
        }
        obj.item_date = formData.dateTime
        obj.item_memo = formData.mark
        obj.is_store_serve = formData.is_store_serve
        if(this.$route.query.supplier){
          obj.supplier_id = this.$route.query.supplier
        }
        this.$loadingWrap.show()
        addCart(obj).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('已加入购物车')
            this.$Bus.$emit('changeCartNum', res.add_num)
            setTimeout(() => {
              this.overlayVisible = false
            }, 800)
          } else {
            this.$Error('添加失败：' + res.msg)
          }
        })
      },
      /**
       * 群接龙加入购物车
       */
      handleClickAddSolitaire() {
        const formData = this.formData
        const param = {}
        param.activity_id = this.activity_id
        param.item_id = this.itemId
        param.item_date = formData.dateTime
        param.item_memo = formData.mark
        param.id = this.itemId
        param.is_store_serve = formData.is_store_serve
        param.dhs_send = 0
        param.value = formData.skuKeyStr
        param.num = formData.addNum

        if (this.skuList.length > 0) { // sku未选择则提示
          if (this.noChooseProp.length > 0) {
            this.$Error(`${this.skuNameStr}`)
            return false
          }
        }
        // 时间验证
        if (this.htmlData.item_config && this.htmlData.item_config.shopping_need_date == 1) {
          if (!formData.dateTime) {
            this.$Error(`请选择${this.htmlData.item_config.shopping_date_name}`)
            return false
          }
        }
        // 备注验证
        if (this.htmlData.item_config && this.htmlData.item_config.shopping_need_memo == 1) {
          if (!formData.mark) {
            this.$Error(`请填写备注`)
            return false
          }
        }

        addSolitaireCart(param).then(res => {
          if (res.status == 1) {
            this.$Error(res.msg)
            setTimeout(() => {
              this.overlayVisible = false
            }, 800)
            this.$emit('addSolitaireSuccess')
          } else {
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 搭配套餐点击返回
       */
      handleClickAssort() {
        const assort = {}
        assort.skuNameStr = this.skuNameStr
        assort.skuId = this.formData.skuKeyStr
        assort.itemId = this.itemId
        this.$emit('assortSku', assort)
      },
      /**
       * 点击试用按钮跳转
       */
      handleClickTryItem() {
        if (this.skuList.length > 0) { // sku未选择则提示
          if (this.noChooseProp.length > 0) {
            this.$Error(`${this.skuNameStr}`)
            return false
          }
        }
        this.$JumpName(this, 'item-try', {
          item_try_id: this.htmlData.item_try.item_try_id,
          sku: this.formData.skuKeyStr
        })
      },
      // 日期转换
      formatDate(str) {
        let date = ''
        if (str) {
          const arr = str.split('-')
          date = new Date(arr[0], arr[1] - 1, arr[2]).toString()
        }
        return date
      },
      /**
       * 商品价格 整数放大
       */
      scaleGoodsPriceFn(price, className) {
        return scaleGoodsPrice(price, className)
      },
      // 关闭弹出层时触发
      skuPopClose() {
        const skuLabel = this.skuNameStr.substr(0, 2)
        const skuDetail = this.skuNameStr.substring(3)
        this.$Bus.$emit('skuSelected', { skuLabel: skuLabel, skuDetail: skuDetail })
      },
      /**
       * 关闭弹窗
       */
      handleCloseDialog() {
        this.overlayVisible = false
        this.$emit('update:visible', false)
      },
      /**
       * 清空数据
       */
      clearData() {
        this.selectArr = [] // 存放被选中的值
        this.shopItemInfo = {} // 存放要和选中的值进行匹配的数据
        this.subIndex = [] // 是否选中因为不确定是多规格还是单规格，所以这里定义数组来判断
        this.skuList = []
        this.dhSkuList = []
        this.skuInfo = null
        this.skuObj = {}
        this.skuNameStr = ''
        this.htmlData = ''
        this.skuList = []
        this.buySpecList = []
        this.formData = {
          dateTime: '',
          addNum: 1,
          skuKeyStr: '',
          mark: '',
          item_cycle_sku: '',
          item_cycle_delivery: '',
          is_store_serve: '1'
        }
      },
      /**
       * 打开时间选择
       */
      handleOpenDatePicker() {
        this.dateTimeVisible = true
      },
      /**
       * 弹窗中的输入框失去焦点时页面复原
       */
      blurEvent() {
        window.scroll(0, 0)
      },
      /**
       * 获取详情
       */
      getDetailAjaxFn(val) {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        const data={
          'item_id': val
        }
        if(this.$route.query.supplier){
          data.supplier_id = this.$route.query.supplier
          data.supplier = this.$route.query.supplier
        }
        getDetailAjax(data).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.getDetailData(res.data)
          } else {
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 获取详情之后的数据处理
       */
      getDetailData(resData) {
        this.showSkuDetail = true
        this.htmlData = resData
        if (this.htmlData.isItemStoreServe != 1) {
          this.formData.is_store_serve = ''
        }
        if (this.gift) {
          this.htmlData.is_item_detail_style = 1
        }
        // 起购数量
        if (parseInt(resData.item_detail.sell_num) > 0) {
          this.minLimitNum = parseInt(resData.item_detail.sell_num)
          this.formData.addNum = resData.item_detail.sell_num
        }
        this.goodsImg = resData.imgUrl
        this.arrSkuImg.push(resData.imgUrl)
        this.skuList = resData.item_detail.property_names || []
        this.skuAlias = resData.skuAlias ? resData.skuAlias : {}
        this.skuImg = resData.sku_img ? resData.sku_img : {}
        if(this.skuList.length<=0){
          this.hasSku=false
        }
        if (this.htmlData.item_config && this.htmlData.item_config.shopping_date_start) {
          this.minDate = this.formatDate(this.htmlData.item_config.shopping_date_start)
        }
        if (this.htmlData.item_config && this.htmlData.item_config.shopping_date_end) {
          this.maxDate = this.formatDate(this.htmlData.item_config.shopping_date_end)
        }
        const dhSkulist = resData.sku.arr_sku
        const noSkuDhsList = resData.ladder_price ? resData.ladder_price : []
        if (Array.isArray(dhSkulist)) {
          dhSkulist.forEach(item => {
            item.chooseNum = 0
            item.jtPrice = item.new_sku_ladder[0] ? item.new_sku_ladder[0].ladder_region_price : item.price
          })
          this.dhSkuList = dhSkulist
        }
        // 订货商阶梯价格
        if (this.htmlData.activity == 6 && this.htmlData.is_item_detail_style == '0' && this.detailAll && this.detailAll.ladder_price && this.detailAll.ladder_price.length>0 && this.activityType != 'collocate' && this.activityType != 'addSolitaireCar') {
          if (noSkuDhsList.length > 0 && Number(noSkuDhsList[0].ladder_min) <= 1) {
            this.noSkuDhsPrice = noSkuDhsList[0].ladder_region_price
          } else {
            this.noSkuDhsPrice = this.htmlData.item_detail.price
          }
          this.noSkuDhsList = noSkuDhsList
        }

        if (resData.sku.sku) this.skuInfo = JSON.parse(resData.sku.sku)
        // 周期购规格
        this.buySpecList = resData.item_cycle ? resData.item_cycle.buy_spec : []
        if (resData.item_cycle && Array.isArray(resData.item_cycle.estime_deliver)) {
          this.estimeDeliverList = resData.item_cycle.estime_deliver
        }
        // 判断是否只有一个sku 有就选中
        if (this.skuList.length == 1 && this.skuList[0].child_names.length == 1) {
          this.handleClickSku(this.skuList[0].child_names[0], 0, 0)
        }
        this.dealFindSkuInfo()
        // 处理是否有库存为0的sku
        this.initSku()
      },

      // 处理订货商阶梯价格
      changeNumDhs(param) {
        const index = param.idx
        let chooseNumber = param.number
        const dhsSkuListJt = JSON.parse(JSON.stringify(this.dhSkuList))
        if (dhsSkuListJt[index].new_sku_ladder.length > 0) {
            for (let i = 0; i < dhsSkuListJt[index].new_sku_ladder.length; i++) {
              if (Number(chooseNumber) >= Number(dhsSkuListJt[index].new_sku_ladder[i].ladder_min) && Number(chooseNumber) <= Number(dhsSkuListJt[index].new_sku_ladder[i].ladder_max)) {
                dhsSkuListJt[index].jtPrice = dhsSkuListJt[index].new_sku_ladder[i].ladder_region_price
                break
              } else {
                dhsSkuListJt[index].jtPrice = dhsSkuListJt[index].jtPrice
              }
            }
        }
        this.dhSkuList = dhsSkuListJt
        this.dhsChangeImg(param.item)
      },

      changeNoSkuNum(selectNumber) {
        let chooseNumber = selectNumber
        const noDhsSkuListJt = JSON.parse(JSON.stringify(this.noSkuDhsList))
        if (noDhsSkuListJt.length > 0) {
          for (let i = 0; i <noDhsSkuListJt.length; i++) {
            if (Number(chooseNumber) >= Number(noDhsSkuListJt[i].ladder_min) && Number(chooseNumber) <= Number(noDhsSkuListJt[i].ladder_max)) {
              this.noSkuDhsPrice = noDhsSkuListJt[i].ladder_region_price
              break
            } else {
              this.noSkuDhsPrice = this.htmlData.item_detail.price
            }
          }
        }
      },
      // 野火教育定制 联系老师 start
      contactTeacher() {
        if (!this.htmlData.wild_fire_contract_tea_pic) {
          this.$Error('该课程暂未关联老师，请联系管理员')
          return false
        }
        this.dialogVisible = true
        if (!this.imgLoaded) {
          this.$loadingWrap.show()
        }
      },
      loadImg() {
        this.$loadingWrap.close()
        this.imgLoaded = true
      }
      // 野火教育定制 ent
    }
  })
</script>

<style lang="scss">
  .fontNum {
    .num-font{
      font-size: 28px !important;
    }
  }
</style>

<style lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  .sku-pop{
    border-radius:20px 20px 0 0;
    overflow-y: visible;
    .sku-wrapper{
      height: 100%;
      &-app{
        width: 100%;
        z-index: 10;
        background: #fff;
        padding-bottom: 100px;
        &-head{
          display:flex;
          padding: 30px;
          font-size: 0;
          position: relative;
          z-index: 0;
          .left-wrap{
            .img{
              width: 186px;
              height: 186px;
              border-radius: 10px;
              background:#F5F5F5;
              overflow: hidden;
              img{
                width: 100%;
                height: 100%;
              }
            }
          }
          .right-wrap{
            flex:1;
            display:flex;
            flex-direction: column;
            justify-content: center;
            font-size: 22px;
            margin-left: 30px;
            &-item{
              margin-top:15px;
              color: #666;
              .item-tips{
                display: inline-block;
                font-size: 24px;
                line-height: 24px;
                padding: 4px 14px;
                border-radius: 24px;
                color: #F30C23;
                background: #FFF0F1;
              }
              &.price{
                font-size: 32px;
                color: $priceColor;
                .o-price{
                  font-size: 24px;
                  color: #999;
                  margin-left: 10px;
                  text-decoration: line-through;
                }
              }
              .sku-price{
                margin-right:12px;
              }
              // 券后价
              .coupon-price{
                display:inline-block;
                font-size:24px;
              }
              .sku-dollar{
                color:#FFA101;
              }
            }
          }
          .close{
            width: 80px;
            height: 80px;
            line-height: 80px;
            position: absolute;
            color: #666;
            font-size: 46px;
            text-align: center;
            right: 0;
            top: 0;
            .icon-close{
              font-size:32px;
              color:#999;
            }
            .img-close{
              display: inline-block;
              width: 28px;
              height: 28px;
              background: url(https://img.wifenxiao.com/h5-wfx/images/common/close-icon.png) no-repeat center;
              background-size: 100% 100%;
            }
          }
        }
        &-body{
          // height: calc(100% - 300px);
          height:590px;
          overflow: auto;
          padding:0 30px;
          -webkit-overflow-scrolling: touch;
          .sku-item{
            // border-top: 1px solid #eee;
            .need_memo{
              padding-bottom: 100px;
            }
            &-title{
              padding: 10px 0 24px;
              font-size: 26px;
              color: #333;
              .tips{
                font-size: 24px;
                color: #B7B7B7;
              }
            }
            &-app{
              padding:2px 0 10px;
              .btn{
                min-width:120px;
                height: auto;
                padding:10px 24px;
                margin-right: 24px;
                margin-bottom: 24px;
                font-size:22px;
                text-align: left;
                border-radius: 40px;
                @include btnGroup($fontSkuColor, $bgSkuColor);
                border-color: $bdSkuColor;
                &:last-child{
                  margin-right:0;
                }
                &.active{
                  @include btnGroup($fontCurSkuColor, $bgCurSkuColor);
                  border-color: $bdCurSkuColor;
                }
                &.noneActive{
                  background-color: #ccc;
                  opacity: 0.4;
                  color: #000;
                  pointer-events: none;
                }
              }
            }
            &-add, &-date{
              padding: 30px 0;
              &-title{
                font-size: 26px;
                color: #333;
                height: 60px;
                line-height: 60px;
              }
              &-con{
                display: inline-block;
                float: right;
                margin-top: 10px;
                .sku-bz-wd {
                  width: 410px;
                  input {
                    width: 100%;
                  }
                }
                .input{
                  font-size: 26px;
                  input{
                    text-align: center;
                    border: none;
                    color:#333;
                  }
                }
              }
            }
          }

          .sku-dh{
            padding-bottom: 60px;
            &-item{
              display: flex;
              flex-direction: row;
              align-items:center;
              padding: 24px 0;
              border-bottom: 2px solid #EDEDED;
              color: #666;
              &.title{
                font-size: 28px;
                color: #000;
                .sku-dh-item-price{
                  color: #000;
                }
              }
              &-info{
                width: 290px;
                padding: 0 10px 0 0;
                line-height: 32px;
                display: flex;
                align-items: center;
                font-size:26px;
                color:#333;
                box-sizing: border-box;
              }
              &-price{
                width: 230px;
                color: $priceColor;
                box-sizing: border-box;
                .price, .stock{
                  @include showEllipsis;
                  margin: 2px 0;
                  color:#666;
                }
                del{
                  color: #999;
                  font-size: 24px;
                  line-height: 32px;
                }
                .inline-block{
                  display: inline-block;
                  vertical-align: text-bottom;
                }
              }

              &-num{
                text-align:right;
                box-sizing: border-box;
                width: 200px;
                .num{
                  display:inline-block;
                  vertical-align: middle;
                }
                .unit{
                  display: inline-block;
                  height: 60px;
                  line-height: 60px;
                  text-align: center;
                }
              }
            }
          }
          .mdcine_line {
            font-size: 26px;
            line-height: 50px;
            .t1 {
              display: inline-block;
              width: 180px;

            }
          }
        }
        &-foot{
          width: 100%;
          position: fixed;
          bottom: 0;
          left: 0;
          padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
          padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
          z-index: 10;
          background-color: #fff;
          .sku-btn{
            display: flex;
            flex-direction: row;
            padding: 10px 24px;
            background-color: #fff;
            border-top:2px solid #EDEDED;
            &-item{
              flex: 1;
              width: 50%;
              font-size: 26px;
              text-align: center;
              height: 76px;
              line-height: 76px;
              color: #fff;
              font-weight: bold;
              &:first-child{
                border-radius: 40px 0 0 40px;
              }
              &:last-child{
                border-radius: 0 40px 40px 0;
              }
              &.zqg-gra-btn{
                background: linear-gradient(to right, #FF3E7E, #FF285B);
              }
              &.try-gra-btn{
                background: linear-gradient(to right, #48b1ff, #5399ff);
              }
              &.radiusAll{
                border-radius: 50px!important;
              }
            }
          }
        }
      }
    }
  }
  .code-pop {
    background-color: transparent;
    .teacher-code-wrap {
      background: transparent;
      position: relative;
      padding: 50px;
      .teacher-code-wrap-close {
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        img {
          width: 100%;
        }
      }
      .teacher-code-img {
        width: 400px;
        background: #fff;
        padding: 10px;
        margin: auto;
        img{
          max-width: 100%;
          width: 100%;
        }
      }
      .tips {
        background: #EF6666;
        padding: 30px 60px;
        color: #fff;
        margin-top: 40px;
        border-radius: 50px;
        white-space: nowrap;
      }
    }
  }
  .is_cart_prohibit {
    .sku-btn-item {
      border-radius: 40px!important;
    }
  }
  .retail_price {
    font-size: 22px;
    color: #666;
    margin-top: 10px
  }
  .purchase_num {
    font-size: 22px;
    color: #666666;
    text-align: right;
    position: relative;
    top: -20px;
  }
</style>
